<template>
	<Widget class="timeline" v-bind="$props">
		<el-timeline v-if="items.length">
			<el-timeline-item
				v-for="(item, value) in items"
				:key="value"
				:timestamp="item.timestamp"
				:hollow="item.hollow"
				:type="item.type"
				:color="item.color"
				:placement="placement"
			>
				<span v-if="enableTitle">{{ item.value }}</span>
				<el-card v-if="enableCard">
					<h4>{{ item.text }}</h4>
					<p>{{ item.content }}</p>
				</el-card>
			</el-timeline-item>
		</el-timeline>
		
		<el-empty v-else description="暂无数据..."/>
	
	</Widget>
</template>

<script>
import {
	Widget
} from "hb-full-cli";

export default Widget({
	props: {
		items: {
			type: Array,
			default() {
				return [];
			},
		},
		value: {},
		timestamp: {
			type: String,
			default: "",
		},
		hollow: {
			type: Boolean,
			default: "",
		},
		type: {
			type: String,
			default: "default",
		},
		color: {
			type: String,
			default: "",
		},
		placement: {
			type: String,
			default: "buttom",
		},
		enableCard: {
			type: Boolean,
			default: false
		},
		enableTitle: {
			type: Boolean,
			default: true
		}
	},
	
	syncPropNames: ["value"],
});
</script>
